<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		
		<!-- 1.画圆形 
		      2.画正三角形
		思路1：  html   div元素
			    css   倒角，必须有边框
				
		思路2：  html    div元素 #triangle
				css     斜边
				        不设置宽高
						左边框：50像素 实线红色 transparent
						右边框：50像素实线黄色
						下边框：50像素实线蓝色，透明度.3
						颜色值：rgba(255,255,0,.3)
			  -->
	<style>
		div#sanjiao{
			width: 300px;
			height: 300px;
			border: 1px solid red;
		    border-radius: 50%;
			/* 边框阴影属性 box-shadow属性*/
			box-shadow: 5px 5px 100px 0px red inset;
		}
		div#triangle{
			 width: 0;
			/*border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 50px solid rgba(0, 0, 0,.3); */
			border: 50px solid transparent;
			border-top-color: rgba(0, 0, 255,.3);
		}
		input{
			outline: 1px solid red;
			outline: 0;
		}
	</style>
	</head>
	<body>
	    <div id="sanjiao"></div>
		<div id="triangle"></div>
		文本框<input type="text">
	</body>
</html